<template>
  <div class="echarts-spreading-code-form">
    <div class="header">
      <p>可通过使用<Tag color="primary">this.chart</Tag>获取到当前组件的Echarts实例，并使用setOption来实现图表的功能、配置扩展，组件每一次重绘都会运行以下代码。</p>
    </div>

    <CodeEditor v-model="echartsSpreadingCode" :placeholder="'let option = {\n\n}\nthis.chart.setOption(option)'"></CodeEditor>
  </div>
</template>

<script>
export default {
  name: "EchartsSpreadingCodeForm",
  props: {
    value: {
      type: String
    }
  },
  data() {
    return {
      echartsSpreadingCode: this.value
    }
  },
  mounted() {

  },
  methods: {},
  computed: {},
  watch: {
    echartsSpreadingCode (val) {
      this.$emit('input', val)
    }
  }
}
</script>

<style lang="less" scoped>
.echarts-spreading-code-form {
  margin-top: 10px;
  .header {
    background-color: #616161;
    border: 1px solid #424242;
    padding: 10px;
    color: #fff;
    p {
      text-align: justify;
    }
  }

}
</style>
